<template>
  <div>
    <div id="search">
      <el-input v-model="course_key" placeholder="请输入内容" style="width:20%"></el-input>

      <el-button type="button" size="big" @click="search_key">搜索</el-button>
    </div>

    <el-dialog title="添加课程" :visible.sync="addDialogVisBle" width="50%" :before-close="handleClose">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
        <el-form-item label="标题" prop='title'>
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>

        <el-form-item label="课程简介" prop='content'>
          <el-input v-model="addForm.content"></el-input>
        </el-form-item>

        <el-form-item label="课程类型" prop="t_id">
          <el-select v-model="addForm.t_id">
            <el-option v-for="type in type_list" :key="type.id" :value="type.id" :label="type.name"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="上传图片">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:8000/static/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item> -->
        <el-form-item label="课程图片" prop='img'>
          <el-input v-model="addForm.img"></el-input>
        </el-form-item>

        <el-form-item label="课程标签" prop="tag_id">
          <el-select v-model="addForm.tag_id">
            <el-option v-for="tag in tag_list" :key="tag.id" :value="tag.id" :label="tag.tag_name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="课程作者" prop="uid">
          <el-select v-model="addForm.uid">
            <el-option
              v-for="user in user_list"
              :key="user.id"
              :value="user.id"
              :label="user.username"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="课程价格" prop="price">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>

        <el-form-item label="学习人数" prop="student_num">
          <el-input v-model="addForm.student_num" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="热度" prop="flow_num">
          <el-input v-model="addForm.flow_num" :disabled="true"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisBle = false">取 消</el-button>
        <el-button type="primary" @click="adduser()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改 Edit -->
    <el-dialog
      title="修改课程"
      :visible.sync="editDialogVisBle"
      width="50%"
      :before-close="handleClose"
    >
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>

        <el-form-item label="课程简介">
          <el-input v-model="editForm.content"></el-input>
        </el-form-item>

        <el-form-item label="课程类型">
          <el-select v-model="editForm.t_id">
            <el-option v-for="type in type_list" :key="type.id" :value="type.id" :label="type.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="课程图片">
          <el-input v-model="editForm.img"></el-input>
        </el-form-item>

        <el-form-item label="课程标签">
          <el-select v-model="editForm.tag_id">
            <el-option v-for="tag in tag_list" :key="tag.id" :value="tag.id" :label="tag.tag_name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="课程作者" prop="uid">
          <el-select v-model="editForm.uid">
            <el-option
              v-for="user in user_list"
              :key="user.id"
              :value="user.id"
              :label="user.username"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="课程价格" prop="price">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>

        <el-form-item label="学习人数" prop="student_num">
          <el-input v-model="editForm.student_num"></el-input>
        </el-form-item>

        <el-form-item label="热度" prop="flow_num">
          <el-input v-model="editForm.flow_num"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisBle = false">取 消</el-button>
        <el-button type="primary" @click="updatecourse()">确 定</el-button>
      </span>
    </el-dialog>

    <div id="tools">
      <el-button type="button" size="small" @click="addDialogVisBle = true">添加</el-button>
      <el-button type="button" size="small" @click="ManyDelete()">批量删除</el-button>
    </div>

    <el-table :data="course_list" border @selection-change="selsChange" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column fixed prop="id" label="id" width="150"></el-table-column>
      <el-table-column prop="title" label="标题" width="150"></el-table-column>
      <el-table-column prop="content" label="内容" width="150"></el-table-column>
      <el-table-column prop="t_id" label="T_id" width="150"></el-table-column>
      <el-table-column prop="img" label="图片" width="150"></el-table-column>
      <el-table-column prop="tag_id" label="标签" width="150"></el-table-column>
      <el-table-column prop="uid" label="UID" width="150"></el-table-column>
      <el-table-column prop="price" label="价格" width="150"></el-table-column>
      <el-table-column prop="student_num" label="学生人数" width="150"></el-table-column>
      <el-table-column prop="flow_num" label="热度" width="150"></el-table-column>

      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="10"></el-pagination>
  </div>
</template>

<script>
var _this;
var _addForm;
export default {
  mounted: function() {
    this.showcourse();
  },
  methods: {
    search_key() {
      this.axios
        .post("http://127.0.0.1:8000/class/search_course/", {
          search_title: _this.course_key
        })
        .then(res => {
          console.log(res);
          this.course_list = res.data.course_ser;
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    showcourse: function() {
      this.axios.get("http://127.0.0.1:8000/class/get_course/").then(res => {
        console.log(res.data);
        this.course_list = res.data.course_ser;
        _this.tag_list = res.data.tag_ser;
        _this.user_list = res.data.user_ser;
        _this.type_list = res.data.type_ser;
      });
    },
    handleDelete(row) {
      console.log(row);
      this.axios
        .post("http://127.0.0.1:8000/class/onlydelete_course/", { id: row.id })
        .then(res => {
          console.log(res.data);
        });
    },
    selsChange(sels) {
      this.sels = sels;
    },
    ManyDelete() {
      var ids = this.sels.map(item => item.id).join(); //获取所有选中行的id组成的字符串，以逗号分隔
      console.log(ids);
      this.$confirm("此操作将永久删除该文件及其子文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if ((_this.confirmButtonText = "确定")) {
          this.axios
            .post("http://127.0.0.1:8000/class/manydelete_course/", {
              course_list: ids
            })
            .then(res => {
              console.log(res.data);
              alert(res.data.msg);
            });
        }
      });
    },
    adduser() {
      
      this.axios
        .post("http://127.0.0.1:8000/class/add_course/", {
          addForm: _this.addForm
        })
        .then(res => {
          console.log(res);
          _this.addDialogVisBle = false;
          if (res.data.code = 200){
          }
        });
    },
    updatecourse() {
      this.axios
        .put("http://127.0.0.1:8000/class/update_course/", {
          editfrom: _this.editForm
        })
        .then(res => {
          console.log(res);
          _this.editDialogVisBle = false;
        });
    },

    showEditDialog(row) {
      _this.editDialogVisBle = true;
      _this.axios
        .get("http://127.0.0.1:8000/class/get_editcourse/?id=" + row.id)
        .then(res => {
          console.log(res);
          _this.editForm = res.data.course_edit;
        });
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  },
  created() {
    _this = this;
    _addForm = _this.addForm;
  },

  data() {
    return {
      imageUrl:'',
      course_type: "",
      course_tag: "",
      course_user: "",
      course_key: "",
      //课程列表
      course_list: [],
      tag_list: [],
      user_list: [],
      type_list: [],
      input: "",
      sels: "", //批量删除
      // 控制添加课程对话框的显示
      addDialogVisBle: false,
      editDialogVisBle: false,
      // 添加用户表单
      addForm: {
        title: "",
        content: "",
        t_id: "",
        img: "",
        tag_id: "",
        uid: "",
        price: ""
      },

      editForm: {
        id: "",
        title: "",
        content: "",
        t_id: "",
        img: "",
        tag_id: "",
        uid: "",
        price: ""
      },
      // 添加用户表单颜整
      addFormRules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur"
          },
          { min: 1, max: 255, message: "标题的长度至少一位", trigger: "blur" }
        ],

        content: "",
        t_id: "",
        img: "",
        tag_id: "",
        uid: "",
        price: "",
        student_num: "",
        flow_num: ""
      },
      editFormRules: {
        id: "",
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur"
          },
          { min: 1, max: 255, message: "标题的长度至少一位", trigger: "blur" }
        ],

        content: "",
        t_id: "",
        img: "",
        tag_id: "",
        uid: "",
        price: "",
        student_num: "",
        flow_num: ""
      }
    };
  }
};
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>